<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>年份季度选择器</title>
    <link rel="stylesheet" href="../static/js/layui/css/layui.css">
    <style>

    </style>
</head>
<body>
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">选择季度</label>
            <div class="layui-input-block">
                <input type="text" id="quarter" class="layui-input" placeholder="请选择季度" readonly>
                <input type="hidden" name="quarter">
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../static/js/layui/layui.js"></script>
    <script>
        layui.define(['jquery'], function (exports) {
            var $ = layui.$;

            var QuarterPicker = function (options) {
                this.options = $.extend({
                    trigger: '#quarter',    // 触发元素
                    format: 'yyyy年 第Q季度', // 显示格式
                    value: '',             // 初始值 格式：yyyy-Q
                    startYear: 2000,       // 开始年份
                    endYear: new Date().getFullYear(), // 结束年份
                    lang: 'zh',            // 语言
                    done: function (value, date) { } // 选择回调
                }, options);

                this.init();
            };

            QuarterPicker.prototype = {
                init: function () {
                    var that = this;
                    this.value = this.parseValue(this.options.value);
                    this.renderDOM();
                    this.bindEvents();
                },

                parseValue: function (value) {
                    if (value && /^\d{4}-Q[1-4]$/.test(value)) {
                        var arr = value.split('-');
                        return {
                            year: parseInt(arr[0]),
                            quarter: parseInt(arr[1].substr(1))
                        }
                    }
                    return { year: new Date().getFullYear(), quarter: 1 };
                },

                renderDOM: function () {
                    var tpl = '<div class="quarter-picker-panel">' +
                        '<div class="year-control">' +
                        '   <button type="button" class="layui-btn layui-btn-xs prev-year">&lt;</button>' +
                        '   <span class="current-year"></span>' +
                        '   <button type="button" class="layui-btn layui-btn-xs next-year">&gt;</button>' +
                        '</div>' +
                        '<div class="quarter-btns"></div>' +
                        '</div>';

                    this.$trigger = $(this.options.trigger);
                    this.$trigger.after(tpl);
                    this.$panel = this.$trigger.next('.quarter-picker-panel');
                    this.$year = this.$panel.find('.current-year');
                    this.$quarterBtns = this.$panel.find('.quarter-btns');

                    // 初始化季度按钮
                    var quarterHtml = '';
                    for (var i = 1; i <= 4; i++) {
                        quarterHtml += '<button type="button" class="layui-btn layui-btn-primary layui-btn-sm quarter-btn" data-q="' + i + '">Q' + i + '</button>';
                    }
                    this.$quarterBtns.html(quarterHtml);
                    this.$quarterBtns.find('.quarter-btn').eq(this.value.quarter - 1).addClass('active');
                    this.updateYear(this.value.year);
                },

                updateYear: function (year) {
                    this.currentYear = year;
                    this.$year.text(year + '年');
                },

                bindEvents: function () {
                    var that = this;

                    // 触发元素点击
                    this.$trigger.on('click', function (e) {
                        e.stopPropagation();
                        that.$panel.toggle();
                    });

                    // 年份切换
                    this.$panel.on('click', '.prev-year', function () {
                        that.updateYear(that.currentYear - 1);
                    }).on('click', '.next-year', function () {
                        that.updateYear(that.currentYear + 1);
                    });

                    // 季度选择
                    this.$panel.on('click', '.quarter-btn', function () {
                        var q = $(this).data('q');
                        that.$quarterBtns.find('.quarter-btn').removeClass('active');
                        $(this).addClass('active');

                        var value = that.currentYear + '-Q' + q;
                        var display = that.options.format
                            .replace('yyyy', that.currentYear)
                            .replace('Q', q);

                        that.$trigger.val(display);
                        that.$trigger.next('input[type="hidden"]').val(value);

                        that.options.done(value, {
                            year: that.currentYear,
                            quarter: q
                        });

                        that.$panel.hide();
                    });

                    // 点击外部关闭
                    $(document).on('click', function (e) {
                        if (!$(e.target).closest('.quarter-picker-panel').length &&
                            !$(e.target).is(that.$trigger)) {
                            that.$panel.hide();
                        }
                    });
                }
            };

            exports('quarterPicker', function (options) {
                return new QuarterPicker(options || {});
            });
        });
    </script>

    <script>
        // 使用示例
        layui.use(['quarterPicker'], function () {
            var quarterPicker = layui.quarterPicker;

            var picker = quarterPicker({
                trigger: '#quarter',
                value: '2023-Q3',
                done: function (value, date) {
                    console.log('选中的值:', value);
                    console.log('日期对象:', date);
                }
            });
        });
    </script>
</body>
</html>